*{
	margin:0;
	padding:0;
	list-style:none;
}
.wrapper{
	width:700px;
	margin:auto;
	margin-top:100px;
	border:1px solid;
}
.wrapper ul{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
}
.wrapper ul li{
	width:200px;
	height:200px;
	margin:10px;
	display:inline-block;
	/*设置景深显示3d效果*/
	perspective:300px;
}
.wrapper .picbox{
	position:relative;
	width:100%;
	height:100%;
	/*将元素变成3d元素*/
	transform-style:preserve-3d;
	/*transform-origin的第三个参数定义变形中心距离z轴的距离*/
	transform-origin:50% 50% -100px;
	animation:0.3s ease-out forwards;
}
.wrapper .picbox .show,
.wrapper .picbox .hide {
	width:100%;
	height:100%;
	/*opacity:0.5;*/
}
.wrapper .picbox .show img{
	width:100%;
	height:100%;
}
.wrapper .hide{
	position:absolute;
	top:0;
	left:0;
	background:#000;
	color:#fff;
	width:200px;
	height:200px;
	font-size:20px;
	text-align:center;
	line-height:200px;
	/*设置3d会开启gpu加速*/
	transform:translate3d(0,0,-1px);
}

/*设置翻转样式*/
/*无论是in还是out，hide永远拼接在上面*/
.wrapper .in-top .picbox .hide,
.wrapper .out-top .picbox .hide{
	transform-origin:bottom;
	transform:translate3d(0,-100%,0) rotate3d(1,0,0,90deg);
}
.wrapper .in-top .picbox{
	animation-name: in-top;
}
.wrapper .out-top .picbox{
	animation-name: out-top;
}
/*进入时动画关键帧*/
@keyframes in-top {
	0%{
		transform:rotate3d(0,0,0,0);
	}
	100%{
		transform:rotate3d(-1,0,0,90deg);
	}
}
/*离开时动画关键帧*/
@keyframes out-top {
	0%{
		transform:rotate3d(-1,0,0,90deg);
	}
	100%{
		transform:rotate3d(0,0,0,0);
	}
}
.wrapper .in-bottom .picbox .hide,
.wrapper .out-bottom .picbox .hide{
	transform-origin:top;
	transform:translate3d(0,100%,0) rotate3d(-1,0,0,90deg);
}
.wrapper .in-bottom .picbox{
	animation-name: in-bottom;
}
.wrapper .out-bottom .picbox{
	animation-name: out-bottom;
}
@keyframes in-bottom {
	0%{
		transform:rotate3d(0,0,0,0);
	}
	100%{
		transform:rotate3d(1,0,0,90deg);
	}
}
@keyframes out-bottom {
	0%{
		transform:rotate3d(1,0,0,90deg);
	}
	100%{
		transform:rotate3d(0,0,0,0);
	}
}
.wrapper .in-left .picbox .hide,
.wrapper .out-left .picbox .hide{
	transform-origin:right;
	transform:translate3d(-100%,0,0) rotate3d(0,-1,0,90deg);
}
.wrapper .in-left .picbox{
	animation-name: in-left;
}
.wrapper .out-left .picbox{
	animation-name: out-left;
}
@keyframes in-left {
	0%{
		transform:rotate3d(0,0,0,0);
	}
	100%{
		transform:rotate3d(0,1,0,90deg);
	}
}
@keyframes out-left {
	0%{
		transform:rotate3d(0,1,0,90deg);
	}
	100%{
		transform:rotate3d(0,0,0,0);
	}
}
.wrapper .in-right .picbox .hide,
.wrapper .out-right .picbox .hide{
	transform-origin:left;
	transform:translate3d(100%,0,0) rotate3d(0,1,0,90deg);
}
.wrapper .in-right .picbox{
	animation-name: in-right;
}
.wrapper .out-right .picbox{
	animation-name: out-right;
}
@keyframes in-right {
	0%{
		transform:rotate3d(0,0,0,0);
	}
	100%{
		transform:rotate3d(0,-1,0,90deg);
	}
}
@keyframes out-right {
	0%{
		transform:rotate3d(0,-1,0,90deg);
	}
	100%{
		transform:rotate3d(0,0,0,0);
	}
}